<template>
  <div>
    <div class="eip-drawer-body">
      <a-tabs v-model="curSettingKey" tab-position="left" style="height: 100%">
        <a-tab-pane key="1">
          <template slot="tab">
            <div><a-icon type="check-circle" />提交表单</div>
          </template>
          <setting-form
            :options="options.form"
            :columns="columns"
          ></setting-form>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template slot="tab">
            <div><a-icon type="edit" />数据名称</div>
          </template>
          <setting-data
            :options="options.data"
            :columns="columns"
          ></setting-data>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template slot="tab">
            <div><a-icon type="block" />功能开关</div>
          </template>
          <setting-function
            :menuId="menuId"
            :options="options.function"
          ></setting-function>
        </a-tab-pane>
        <a-tab-pane key="4">
          <template slot="tab">
            <a-icon type="read" />
            <a-badge
              :offset="[8, 0]"
              v-if="options.rule"
              :count="options.rule.length"
            >
              业务规则
            </a-badge>
          </template>
          <setting-rule
            :zeroCodeId="zeroCodeId"
            :options="options.rule"
            :columns="columns"
          ></setting-rule>
        </a-tab-pane>
        <a-tab-pane key="7">
          <template slot="tab">
            <div>
              <a-icon type="lock" />
              <a-badge
                :offset="[8, 0]"
                v-if="options.validate"
                :count="options.validate.length"
              >
                业务验证
              </a-badge>
            </div>
          </template>
          <setting-validate
            :zeroCodeId="zeroCodeId"
            :options="options.validate"
            :columns="columns"
          ></setting-validate>
        </a-tab-pane>
        <a-tab-pane key="5">
          <template slot="tab">
            <div>
              <a-icon type="profile" /><a-badge
                :offset="[8, 0]"
                v-if="options.button"
                :count="options.button.length"
              >
                自定义按钮
              </a-badge>
            </div>
          </template>
          <setting-button
            :menuId="menuId"
            :zeroCodeId="zeroCodeId"
            :options="options.button"
          ></setting-button>
        </a-tab-pane>

        <a-tab-pane key="6">
          <template slot="tab">
            <div><a-icon type="printer" />打印模板</div>
          </template>
          <setting-print></setting-print>
        </a-tab-pane>

        <a-tab-pane key="99">
          <template slot="tab">
            <div><a-icon type="code" />事件脚本</div>
          </template>
          <setting-event></setting-event>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { settingJsonPublic } from "@/services/system/zerocode/worksheet/designer";
import settingForm from "./components/form";
import settingData from "./components/data";
import settingFunction from "./components/function";
import settingRule from "./components/rule/index";
import settingValidate from "./components/validate/index";

import settingButton from "./components/button/index";
import settingPrint from "./components/print";
import settingEvent from "./components/event";
export default {
  name: "setting-index",
  components: {
    settingForm,
    settingData,
    settingFunction,
    settingRule,
    settingValidate,
    settingButton,
    settingPrint,
    settingEvent,
  },
  data() {
    return {
      curSettingKey: this.settingkey,
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    zeroCodeId: String,
    title: {
      type: String,
    },
    options: {
      type: Object,
    },
    columns: {
      type: Array,
    },
    settingkey: {
      type: String,
      default: "1",
    },
    menuId: String,
  },
  watch: {
    options: {
      handler: function (newVal, oldVal) {
        this.save();
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    /**
     * 保存
     */
    save() {
      let that = this;
      let param = {
        zeroCodeId: that.zeroCodeId,
        settingJson: JSON.stringify(this.options),
      };
      settingJsonPublic(param).then(function (result) {});
    },
  },
};
</script>
<style scoped>
/deep/ .ant-tabs .ant-tabs-left-bar .ant-tabs-tab {
  text-align: left !important;
}

/deep/.ant-tabs .ant-tabs-left-content {
  padding-left: 3px !important;
}
.eip-drawer-body {
  height: calc(100vh - 50px);
}
</style>
